<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
    .container {
        margin: 0 auto;
        margin-top: 70px;
        text-align: center;
        width: 300px;
    }

    .subTitle {
        color: gray;
        font-size: 14px;
    }

    .title {
        font-size: 45px;
    }

    .input {
        width: 90%;
    }

    .inputContainer {
        text-align: left;
        margin-bottom: 20px;
    }

    .subContainer {
        text-align: left;
    }

    .field {
        font-size: 14px;
    }

    .input {
        border-radius: 6px;
        height: 25px;
        margin-top: 10px;
        border-color: silver;
        border-style: solid;
        background-color: cornsilk;


    }

    .tip {
        margin-top: 5px;
        font-size: 12px;
        color: gray;

    }

    .setting {
        font-size: 9px;
        color: black;
    }

    .label {
        font-size: 12px;
        margin-left: 5px;
        height: 20px;
        vertical-align: middle;
    }

    .checkbox {
        height: 20px;
        vertical-align: middle;
    }

    .btn {
        border-radius: 10px;
        height: 40px;
        width: 300px;
        margin-top: 30px;
        background-color: deepskyblue;
        border-color: blue;
        color: white;
    }
</style>
<body>
<div class="container" id="Application">
    <div class="container">
        <div class="subTitle">加入我们，一起创造美好世界</div>
        <h1 class="title">创建你的账号</h1>
        <div v-for="(item, index) in fields" class="inputContainer">
            <div class="field">{{ item.title }}
                <span v-if="item.required" style="color:red;">*</span></div>
            <input v-model="item.model" class="input" :type="item.type">
            <div class="tip" v-if="index === 2">请确认密码程度需要大于6位</div>
        </div>
        <div class="subContainer">
            <div class="setting">偏好设置</div>
            <input class="checkbox" type="checkbox"/>
            <label class="label">收更新邮件</label>
        </div>
        <button @click="createAccount" class="btn">创建账号</button>
    </div>
</div>
<script>
    const App = {
        data() {
            return {
                fields: [
                    {
                        title: "用户名",
                        required: true,
                        type: "text"
                    }, {
                        title: "邮箱地址",
                        required: false,
                        type: "text"
                    }
                    , {
                        title: "密码",
                        required: true,
                        type: "password"
                    }
                ]
            }
        },
        computed: {
            name: {
                get() {
                    return this.fields[0].model
                },
                set(value) {
                    return this.fields[0] = value;
                }
            },
            email: {
                get() {
                    return this.fields[1].model
                },
                set(value) {
                    return this.fields[1] = value;
                }
            },
            password: {
                get() {
                    return this.fields[2].model
                },
                set(value) {
                    return this.fields[2] = value;
                }
            }
        },
        methods: {
            emailCheck() {
                const verify = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                return !verify.test(this.email);
            },
            createAccount() {
                console.log(this.name)
                console.log(this.password)
                console.log(this.email)
                if (this.name.length === 0) {
                    alert("用户名不能为空")
                } else if (this.password.length <= 6) {
                    alert("密码长度必须大于六位")
                } else if (this.emailCheck()) {
                    alert("邮箱格式不正确")
                }
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</body>
</html>